<template>
  <div class="dishes-view">
    <div class="header">
      <h1 class="title">菜品列表</h1>
      <div class="header-actions">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索菜品名称..." 
            @input="handleSearch"
          >
          <i class="fa fa-search"></i>
        </div>
        <router-link :to="{ name: 'newDish' }" class="create-button">新增菜品</router-link>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error">
      <p>{{ errorMessage }}</p>
      <button @click="fetchDishes">重试</button>
    </div>

    <!-- 列表内容 -->
    <div v-else class="dish-list">
      <div v-if="filteredDishes.length === 0" class="no-results">
        没有找到匹配的菜品
      </div>
      <DishListItem 
        v-for="dish in filteredDishes" 
        :key="dish.dishId" 
        :dish="dish" 
        @delete="handleDelete"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
import DishListItem from '../components/DishListItem.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const dishes = ref([]);
const loading = ref(true);
const error = ref(false);
const errorMessage = ref('');
const searchQuery = ref('');

const BASE_URL = 'http://localhost:8080/healtheat208';

// 计算属性：过滤菜品
const filteredDishes = computed(() => {
  if (!searchQuery.value) {
    return dishes.value;
  }
  const query = searchQuery.value.toLowerCase();
  return dishes.value.filter(dish => 
    dish.dishName.toLowerCase().includes(query)
  );
});

// 处理搜索输入
const handleSearch = () => {
  // 搜索逻辑已通过计算属性自动处理
};

// 获取菜品列表
const fetchDishes = async () => {
  loading.value = true;
  error.value = false;
  try {
    const response = await axios.get(`${BASE_URL}/Dish/list`);
    dishes.value = response.data;
  } catch (err) {
    error.value = true;
    errorMessage.value = err.message || '获取列表失败，请重试';
    console.error('获取菜品列表失败:', err);
  } finally {
    loading.value = false;
  }
};

// 删除菜品
const handleDelete = async (dishId) => {
  if (!confirm('确定要删除此菜品吗？')) return;
  try {
    const response = await axios.delete(`${BASE_URL}/Dish/delete/${dishId}`);
    alert(response.data);
    fetchDishes(); // 刷新列表
  } catch (err) {
    alert(err.message || '删除失败，请重试');
    console.error('删除菜品失败:', err);
  }
};

onMounted(fetchDishes);
</script>

<style scoped>
.dishes-view {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.search-box {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 8px 15px 8px 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-box i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.title {
  margin: 0;
}

.create-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  text-decoration: none;
  white-space: nowrap;
}

.create-button:hover {
  background-color: #45a049;
}

.loading, .error {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  margin: 10px 0;
}

.error {
  background-color: #ffebee;
  color: #b71c1c;
}

.no-results {
  text-align: center;
  padding: 20px;
  color: #666;
  grid-column: 1 / -1;
}

.dish-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

@media (max-width: 600px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    max-width: 100%;
  }
}
</style>